<template>
	<view class="box">
		<view class="content" :class="{tabClassRight:item.type==='1',tabClassLeft:item.type==='2'}"
			v-for="(item,index) in tabData" :key="index" v-if="feedType=='1'">
			<view class="tab">
				<view class="top" :class="{topTabRight:item.type==='1',topTabLeft:item.type==='2'}">
					{{item.type==='1'?'我':'客服'}}
					<span>{{item.sendTime}}</span>
				</view>
				<view class="bottom" :class="{topTabRight:item.type==='1',topTabLeft:item.type==='2'}">{{item.content}}
				</view>
			</view>
		</view>
		<view class="content" :class="{tabClassRight:item.type==='2',tabClassLeft:item.type==='1'}"
			v-for="(item,index) in tabData" :key="index" v-if="feedType=='0'">
			<view class="tab">
				<view class="top" :class="{topTabRight:item.type==='2',topTabLeft:item.type==='1'}">
					{{item.type==='1'?'我':'客户'}}
					<span>{{item.sendTime}}</span>
				</view>
				<view class="bottom" :class="{topTabRight:item.type==='2',topTabLeft:item.type==='1'}">{{item.content}}
				</view>
			</view>
		</view>
		<view class="button" @click="getBack">发起反馈</view>
		<view class="model" v-if="modelData">
			<view class="content">
				<view class="title">订单号</view>
				<view class="back">
					<input type="text" placeholder="请输入订单号" v-model="numOrder" />
				</view>
				<view class="des">详细说明</view>
				<u-input v-model="value" :type="type" :border="border" :height="height" :auto-height="autoHeight"
					placeholder="请输入详细说明" />
				<view class="u-slider__buttonn">
					<u-button type="primary" size="medium" @click="actionClick(0)">取消</u-button>
					<u-button type="primary" size="medium" @click="actionClick(1)">确定</u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		orderConsult
	} from "@/apis/orderConsult.js"
	import {
		orderDetail
	} from "@/apis/orderConsult.js"
	export default {
		data() {
			return {
				detailId: '',
				tabData: [],
				feedType: '',
				modelData: false,
				value: '',
				numOrder: '',
				border: true,
				height: 130,
				autoHeight: true,
			}
		},
		onLoad(val) {
			this.detailId = val.id;
			this.feedType = val.feedType;
			orderDetail(this.detailId)
				.then(res => {
					if (res.code === 200) {
						this.tabData = res.data
					}
				})
		},
		methods: {
			getBack() {
				this.modelData = true;
			},
			actionClick(val) {
				if (val === 1) {
					// 发起反馈发接口
					if (this.numOrder == '' || this.value == '') {
						this.$refs.uToast.show({
							title: '请输入完整信息',
							type: 'error'
						})
						return;
					}
					orderConsult({
							orderId: this.numOrder,
							content: this.value,
							type: '1'
						})
						.then(res => {
							if (res.code === 200) {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'success'
								})
								this.numOrder = '';
								this.value = '';
								this.modelData = false;
							} else {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error'
								})
							}
						})
				} else {
					//取消
					this.modelData = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		width: 750rpx;
		background-color: #F0EFF4;
		padding: 30rpx 30rpx 100rpx 30rpx;
		box-sizing: border-box;

		.content {
			width: 100%;
			min-height: 150rpx;
			margin-bottom: 30rpx;

			.tab {
				height: 100%;
				min-width: 40%;
				background-color: white;
				border-radius: 25rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.top {
					display: flex;
					align-items: center;
					// justify-content: center;
					font-size: 22rpx;
					color: #969696;
					margin-bottom: 20rpx;

					span {
						margin-left: 10rpx;
					}
				}

				.topTabRight {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}

				.topTabLeft {
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}

				.bottom {
					padding: 0 20rpx;
					box-sizing: border-box;
					word-wrap: break-word;
					/* 允许单词内断行 */
					white-space: normal;
					/* 处理空白符，自动换行 */
					line-height: 1.6;
				}
			}
		}

		.button {
			position: fixed;
			z-index: 9;
			left: 0;
			bottom: 0;
			height: 100rpx;
			width: 750rpx;
			line-height: 100rpx;
			text-align: center;
			color: white;
			background-color: red;
		}

		.tabClassRight {
			display: flex;
			justify-content: flex-end;
		}

		.tabClassLeft {
			display: flex;
			justify-content: flex-start;
		}
	}
	
	.model {
		height: 100vh;
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		background-color: rgba(51, 51, 51, .4);
		padding: 320rpx 32rpx 0 32rpx;
		box-sizing: border-box;
	
		.content {
			width: 100%;
			height: 640rpx;
			background-color: white;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			color: #656565;
			overflow: hidden;
	
			.title {
	
				margin-bottom: 35rpx;
			}
	
			.back {
				width: 100%;
				height: 90rpx;
				background-color: #F8F9FD;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
	
				input {
					width: 92%;
					height: 60rpx;
					padding-left: 30rpx;
					box-sizing: border-box;
				}
			}
	
			// .submit{
			.des {
				margin: 35rpx 0;
			}
	
			.u-slider__buttonn {
				width: 100%;
				height: 60rpx;
				display: flex;
				justify-content: space-around;
				margin-top: 52rpx;
			}
	
			// 	width: 100%;
			// 	height: 100rpx;
			// }
		}
	}
</style>